import { PageContainer } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable, {ActionType} from '@ant-design/pro-table';
import {DownOutlined, PlusOutlined} from '@ant-design/icons';
import {Modal, Button, Switch, Dropdown, Menu, message} from 'antd';
import { useRef, useState} from 'react';
import ProForm, {ProFormText, ModalForm} from '@ant-design/pro-form';
import {getCardList,editCardList,updateCardStatus} from "@/services/ant-design-pro/card";
import '../../../content/article.css'
import {history} from 'umi';
import AddModal from "@/pages/user/PayMember/Camille/AddModal";

const Camile = () => {
  const [editList, setEditList] = useState(false)
  const [isShow,setIsShow] = useState('')
  const [formObj] = ProForm.useForm();
  const [editId, seteditId] = useState(undefined)
  const [addCard,setAddCard] = useState(false)
  const actionRef = useRef<ActionType>();

  // 弹出编辑框
  const isShowModal = (record) => {
    setEditList(true)
    seteditId(record.id)
    setIsShow(record.title)

  }
  // 弹出查看卡列表
  const isShowCamille = () => {
    history.push('./ModalCamille')
  }

  // 添加批次
  const add = ()=>{
    setAddCard(false)
  }
  const columns = [
    {
      title: '编号',
      dataIndex: 'id',
      search: false,
      align: "center"
    },
    {
      title: '批次名称',
      dataIndex: 'title',
      align: "center"
    },
    {
      title: '体验天数',
      dataIndex: 'use_day',
      search: false,
      align: "center"
    },
    {
      title: '发卡总数量',
      dataIndex: 'total_num',
      initialValue: 'all',
      search: false,
      align: "center"
    },
    {
      title: '开始体验时间',
      dataIndex: 'use_start_time',
      initialValue: 'all',
      search: false,
      width: 180,
      align: "center"
    },
    {
      title: '结束体验时间',
      key: 'showTime',
      dataIndex: 'use_end_time',
      sorter: true,
      hideInSearch: true,
      width: 180,
      align: "center"
    },
    {
      title: '是否激活',
      dataIndex: 'status',
      ellipsis: true,
      copyable: true,
      search: false,
      align: "center",
      render: (_, record) => [
        <Switch
          checkedChildren="激活"
          unCheckedChildren="冻结"
          defaultChecked={record.status}
          onChange={async (state) => {
            updateCardStatus(record.id,{
              status: state ? 1 : 0
            }).then(() => {
              message.success('操作成功！')
              actionRef.current?.reload();
            })
          }}
        />,
      ],
    },
    {
      title: '备注',
      dataIndex: 'remark',
      initialValue: 'all',
      search: false,
      align: "center"
    },
    {
      title: '操作',
      width: 180,
      search: false,
      align: "center",
      render: (_, record) => [
        <Dropdown overlay={menu(record)}>
          <a className="ant-dropdown-link">
            更多<DownOutlined/>
          </a>
        </Dropdown>,
      ],
    },
  ];
  const menu = (record) => {
    return (
      <Menu>
        <Menu.Item key="1"
          onClick={() => {isShowModal(record)}}
        >
          编辑批次名
        </Menu.Item>
        <Menu.Item key="2" onClick={isShowCamille}>查看卡列表</Menu.Item>
        <Menu.Item key="3">导出</Menu.Item>
      </Menu>
    )
  }

  return (
    <PageContainer>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        request={async (params) => {
          // console.log(params)
          const {data,meta} =await getCardList({...params})
          return {
            data,
            success:true,
            total:meta.pagination.total
          }
        }}
        rowKey="id"
        search={true}
        dateFormatter="string"
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined/>} type="primary" onClick={add}>
            添加批次
          </Button>,
          <Button key="button" onClick={()=>{}}>
            下载二维码
          </Button>,
        ]}
      />
      <AddModal
        addCard={addCard}
        open={()=>{
          setAddCard(false)
        }}
        closed={()=>{
          setAddCard(false)
        }}
      />
      <ModalForm
        title='编辑批次名'
        visible={editList}
        submitter={false}
        destroyOnClose={true}
        onVisibleChange={setEditList}
      >
        <ProForm
          form={formObj}
          onFinish={async (values) => {
            await editCardList(editId,{...values})

            message.success('提交成功！')

            setEditList(false)

            actionRef.current?.reload()
          }}
        >
          <ProFormText
            name="title"
            label="批次名称"
            initialValue={isShow}
            placeholder="请输入相关分类！"
            rules={[{required: true, message: '请输入相关分类！'}]}
          />
        </ProForm>
      </ModalForm>
    </PageContainer>
  )
}
export default Camile;
